<template>
    <div class="name-check" id="nameCheck">
        <input id="name" name="name" class="name-input" v-model="name" placeholder="请填写您的称呼" type="text" @blur="nameInputBlur">
        <label v-if="nameWarnShow" class="name-error" for="name">{{nameWarnText}}</label>
        <img class="booking_close_button" src="../../../assets/images/common/booking_close_button.png" @click="name=null" />
    </div>
</template>
<!--使用方法<div slot="cantClick" @click="sureGetLocationFn" class="com_black"></div>-->
<script>
    export default {
        name: "nameCheck",
        data(){
            return{
                name:null,
                nameWarnShow:false,
                nameWarnText:'用户名不能为空'
            }
        },
        methods:{
            nameInputBlur(){
                if( !this.name ){
                    this.nameWarnText = '用户名不能为空';
                    this.$root.$emit('toast', {msg: this.nameWarnText});
                    this.nameWarnShow = true;
                }else if(!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(this.name)){
                    this.nameWarnText = '用户名为十八位以内中文、数字、字母';
                    this.$root.$emit('toast', {msg: this.nameWarnText});
                    this.nameWarnShow = true;
                }else{
                    this.$emit("isCanGetCodeFn");
                }
            }
        },
        watch:{
            name:function(val){
                let obj = {nameVal:val}
                let nameTrueVar = {}
                this.$emit("changeCheck",obj);
                if(val && /^[a-zA-Z0-9\u4e00-\u9fa5]{0,18}$/.test(val)){
                    nameTrueVar = {nameTrue:true}
                    this.$emit("changeCheck",nameTrueVar);
                    this.nameWarnShow = false;
                }else{
                    nameTrueVar = {nameTrue:false}
                    this.$emit("changeCheck",nameTrueVar);
                    this.nameWarnShow = true;
                }
                this.$emit("isCanGetCodeFn");
            }
        }
    }
</script>

<style scoped>
    .name-check{
        position: relative;
        width: 100%;
    }
    .name-input{
        width: 100%;
        height: .4rem;
        line-height: .4rem;
        border-radius: 5px;
        border: 1px solid #d7d7d7;
        padding-left: .2rem;
        margin-top: .12rem;
    }
    .name-error{
        position: absolute;
        bottom: -.2rem;
        color: red;
        font-size: .11rem;
        left: .2rem;
        z-index: 10;
    }
    .booking_close_button{
        width: .34rem;
        height: .34rem;
        right: 0;
        padding: .1rem;
        position: absolute;
        top: .15rem;
        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>